<template>
  <div>
    <section class="todoapp">
      <!-- header -->
      <header class="header">
        <h1>todos</h1>
        <input
          class="new-todo"
          autofocus
          autocomplete="off"
          placeholder="What needs to be done?"
          @keyup.enter="addTodo"
        />
      </header>
      <!-- main section -->
      <section class="main" v-show="todos.length">
        <input
          class="toggle-all"
          id="toggle-all"
          type="checkbox"
          :checked="allChecked"
          @change="toggleAll(!allChecked)"
        />
        <label for="toggle-all"></label>
        <ul class="todo-list">
          <TodoItem
            v-for="(todo, index) in filteredTodos"
            :key="index"
            :todo="todo"
          />
        </ul>
      </section>
      <!-- footer -->
      <footer class="footer" v-show="todos.length">
        <span class="todo-count">
          <strong>{{ remaining }}</strong>
          {{ remaining | pluralize("item") }} left
        </span>
        <ul class="filters">
          <li v-for="(val, key) in filters">
            <a
              :href="'#/' + key"
              :class="{ selected: visibility === key }"
              @click="visibility = key"
              >{{ key | capitalize }}</a
            >
          </li>
        </ul>
        <button
          class="clear-completed"
          v-show="todos.length > remaining"
          @click="clearCompleted"
        >
          清空
        </button>
      </footer>
    </section>
  </div>
</template>
<script>
import { mapStates, mapActions } from "vuex";
import TodoItem from "@/components/vuex-demo/todos/TodoItem";

const filters = {
  all: todos => todos,
  active: todos => todos.filter(todo => !todo.done),
  completed: todos => todos.filter(todo => todo.done)
};

export default {
  components: { TodoItem },
  data() {
    return {
      visibility: "all",
      filters: filters,
      todos:this.$store.state.Todos.todos
    };
  },
  mounted() {

      console.log(this.todos);

  },
  computed: {

    allChecked() {
      return this.todos.every(todo => todo.done);
    },
    filteredTodos() {
      return filters[this.visibility](this.todos);
    },
    remaining() {
      return this.todos.filter(todo => !todo.done).length;
    }
  },
  methods: {
    ...mapActions(["toggleAll", "clearCompleted"]),
    addTodo(e) {
      const text = e.target.value;
      if (text.trim()) {
        this.$store.dispatch("addTodo", text);
      }
      e.target.value = "";
    }
  },
  filters: {
    pluralize: (n, w) => (n === 1 ? w : w + "s"),
    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
  }
};
</script>
<style scoped>
@import "../assets/usertodos.css";
</style>
